<template>
	<div class="my">
		<div class="my-bg">
			<img v-lazy="userInfo.userBg" alt="背景图片">
			<van-uploader class="up-userbg" :after-read="afterRead" />
		</div>
		<div class="my-info-box">
			<div class="my-info">
				<div class="avatar">
					<img v-lazy="userInfo.userImg">
				</div>
				<div class="my-desc">
					<div class="name">{{userInfo.nickName}}</div>
					<div class="desc">{{userInfo.desc ||"这家伙很懒,什么也没有留下!"}}</div>
				</div>
			</div>
			<div class="info-list">
				<van-cell 
					v-for="(item,index) in userCell"
					:key="index"
					:title="item.title" 
					:to="item.to"
					is-link
			  />
			</div>
		</div>
	</div>
</template>

<script>
	import bus from '@/utils/eventBus.js'
	import { updateUserBg, getUserInfo } from '@/api/user.js'
	export default {
		data () {
			return {
				userInfo: {},  // 用户信息
				userCell: [
					{ title: "个人资料", to: "/userset" },
					{ title: "我的订单", to: "/Order" },
					{ title: "我的收藏", to: "/Collect" },
					{ title: "收货地址", to: "/Address" },
					{ title: "安全中心", to: "/Safety" }
				]
			}
		},
		created() {
			this.userInfo = JSON.parse(window.sessionStorage.getItem('userInfo'))
			
			// userset页面传递的通知
			bus.$on('refresh-userinfo', () => {
					setTimeout(() => {
						console.log('my页面刷新,重新获取session')
						this.userInfo = JSON.parse(window.sessionStorage.getItem('userInfo'))
					},1000)
			})
		},
		methods: {
			// 图片上传回调函数
			afterRead (file) {
				console.log(file)
				// 允许格式
				let type = ["gif", "png", "jpg", "jpeg"]
				// 图片允许大小 1MB
				let size = 1
				// 获取文件后缀
				let fileType = file.file.type.split('/')[1]
				console.log('图片类型',fileType)
				console.log('图片是非符合规则',type.includes(fileType))
				// 判断后缀是否符合要求
				if (!type.includes(fileType)) return this.$toast(`当前文件格式不支持,仅支持${type.join(",")}`)
				// 获取图片大小 (单位为MB)
				let fileSize = file.file.size / 1024 / 1024
				console.log('图片大小',fileSize)
				if (fileSize > size) return this.$toast(`文件不允许超过${size}MB`)
				// 提取base64编码 replace(规定子字符串或要替换的模式的 RegExp 对象,一个字符串值。规定了替换文本或生成替换文本的函数。)
				let base64 = file.content.replace(/^data:image\/[A-Za-z]+;base64,/, "")
				// 判断 token
				const tokenString = window.sessionStorage.getItem('token')
				if(!tokenString) return this.$router.push({name: 'Login'})
				this.$toast.loading({
					message: '上传中···',
					forbidClick: true
				})
				// 发起请求
				updateUserBg({
					tokenString,
					imgType: fileType,
					serverBase64Img: base64
				})
				.then(({data: res}) => {
					this.$toast.clear()
					console.log('上传背景图片',res)
					if (res.code !== 'I001') return this.$router.push({ name: "Login" })
					// 查询获取用户信息
					this._get_user_info()
				})
			},
			// 获取用户信息
			// async _get_user_info () {
			// 	const tokenString = window.sessionStorage.getItem('token')
			// 	const {data: res} = await getUserInfo({tokenString})
			// 	// 判断状态码
			// 	if (res.code !== 'A001') return this.$toast.fail('请求失败,请重新尝试!')
			// 	const userInfo = JSON.stringify(res.result[0])
			// 	window.sessionStorage.setItem('userInfo',userInfo)
			// 	// 获取用户信息
			// 	this.userInfo = JSON.parse(window.sessionStorage.getItem('userInfo'))
			// }
		}
	}
</script>

<style lang="scss" scoped>
	.my{ 
		.my-bg{
			position: relative;
			height: 180px;
			img{
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
			.up-userbg{
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				opacity: 0;
				/deep/ .van-uploader__wrapper{
					width: 100%;
					height: 100%;
					.van-uploader__upload{
						width: 100%;
						height: 100%;
						margin: 0;
					}
				}
			}
		}
		.my-info-box{
			position: relative;
			top: -60px;
			width: 90%;
			margin: auto;
			background-image: linear-gradient(to bottom, rgba(255,255,255,0.15) 0, rgba(255,255,255,0.71) 90px, #fff 90px, #fff 100%);
			border-radius: 12px;
			padding: 10px;
			box-sizing: border-box;
			.my-info{
				display: flex;
				margin-bottom: 10px;
				.avatar{
					width: 80px;
					height: 80px;
					img{
						border-radius: 50%;
						width: 100%;
						height: 100%;
						object-fit: cover;
					}
				}
				.my-desc{
					width: calc(100% - 100px);
					margin-left: 20px;
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					font-size: 16px;
					.name{
						color: skyblue;
						font-weight: bolder;
					}
					.desc{
						line-height: 19px;
						font-size: 14px;
						color: #acaaaa;
						display: -webkit-box;
						overflow: hidden;
						text-overflow: ellipsis;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
					}
				}
			}
		}
	}
</style>